<script setup lang="ts">
import { LayoutType } from '../../../enums'
import useConfigStore from '../../../store/config'

const configStore = useConfigStore()

const layouts = ref([
  LayoutType.ONE,
  LayoutType.TWO,
  LayoutType.THREE,
  LayoutType.FOUR,
])
</script>

<template>
  <div class="flex gap-12px flex-wrap">
    <div
      v-for="(layout, index) in layouts"
      :key="index"
      class="layout"
      :class="[{ active: layout === configStore.getLayoutType }]"
      @click="configStore.setLayoutType(layout)"
    >
      {{ layout }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.layout {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 60px;
  block-size: 48px;
  border-radius: 6px;
  border: 2px solid #ccc;
  cursor: pointer;
}

.layout.active {
  border-color: var(--el-color-primary);
}
</style>
